<template>
    <div>
        <Row>
            <Form ref="queryUserVO" :model="queryUserVO" :label-width="80" inline>
                <Form-item label="姓名">
                    <Input v-model="queryUserVO.userName" placeholder="请输入"></Input>
                </Form-item>
            </Form>
        </Row>
        <Row>
            <Col span="24" style="text-align: center;margin-bottom: 2em">
            <i-col :sm="{ span: 0 }" style="display:inline-block;margin:0 2em;float:none" v-if="hasPermission('UserService.create')">
                <Button type="info" icon="plus" @click="addUser">新增</Button>
            </i-col>
            <i-col :sm="{ span: 2 }" style="display:inline-block;margin:0 2em;float:none">
                <Button type="info" icon="search" @click="queryUser">搜索</Button>
            </i-col>
            <i-col :sm="{ span: 0 }" style="display:inline-block;margin:0 2em;float:none">
                <Button type="info" icon="refresh" @click="clean">清除</Button>
            </i-col>
            </col>
        </Row>
        <row>
            <Table :context="self" :data="sourceData" :size="tablesize" :columns="cols"></Table>
        </row>
        <row style="float: right; margin:1em 0">
            <Page :total="totalRecord" :current="pageNo" :page-size-opts=[10,50,100] show-elevator show-sizer show-total @on-change="onPageIndexChange" @on-page-size-change="onPageSizeChange"></Page>
        </row>
        <Modal ref="modal" v-model="modal" title="新建用户" @on-ok="ok" @on-cancel="cancel">
            <Form :model="userVO" :rules="ruleValidate" :label-width="80">
                <Form-item label="用户名" prop="userName">
                    <Input v-model="userVO.userName" placeholder="请输入用户名"></Input>
                </Form-item>
                <Form-item label="密码" prop="userPassword">
                    <Input v-model="userVO.userPassword" placeholder="请输入密码"></Input>
                </Form-item>
                <Form-item label="用户备注">
                    <Input v-model="userVO.userDesc" type="textarea" placeholder="请输入备注"></Input>
                </Form-item>
            </Form>
        </Modal>
        <Modal ref="role" title="选择权限" v-model="role" @on-ok="getCheckedNodes">
            <template>
                <Tree ref="tree" :data="baseData" show-checkbox></Tree>
            </template>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            self: this,
            totalRecord: 1,
            totalPage: 1,
            pageNo: 1,
            pageSize: 10,
            role: false,
            userId: "",
            cols: [
                {
                    title: '用户名',
                    key: 'userName'
                },
                {
                    title: '密码',
                    key: 'userPassword'
                },
                {
                    title: '用户备注',
                    key: 'userDesc'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 250,
                    align: 'center',
                    render(row, column, index) {
                        return `<i-button type="success" size="small" @click="choose(${index})">角色选择</i-button>
                        <i-button type="primary" size="small" @click="show(${index})">编辑</i-button> 
                        <i-button type="error" size="small" @click="confirmUserDelete(${index})">删除</i-button>`;
                    }
                }
            ],
            baseData: [],
            sourceData: [],
            queryUserVO: {
                userName: ''
            },
            userVO: {
                userName: '',
                userPassword: '',
                userDesc: ''
            },
            tablesize: "small",
            modal: false,
            disabled: false,
            ruleValidate: {
                userName: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                userPassword: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.queryUser();
    },
    methods: {
        queryUser() {
            this.$http.post("services/userquery/" + this.pageSize + "/" + this.pageNo, this.queryUserVO
            ).then(response => {
                var data = response.data;
                console.log(response.data);
                var pageVO = data.pageVO;
                this.sourceData = data.resultList;
                this.totalRecord = pageVO.totalRecord;
            }, response => {
                this.$Message.error("获取失败, 返回: " + response);
            })
        },
        getCheckedNodes() {
            var roleArray = [];
            var addArray = [];
            roleArray = this.$refs.tree.getCheckedNodes();
            for (var i = 0; i < roleArray.length; i++) {
                var userRoleVO = {};
                if (roleArray[i].roleId) {
                    userRoleVO.roleId = roleArray[i].roleId;
                    userRoleVO.userId = this.userId;
                    addArray.push(userRoleVO);
                }
            }
            this.$http.post("services/userRoleInsert/" + this.userId, addArray
            ).then(response => {
                this.disabled = false;
                this.$Message.success("角色添加成功");
                this.queryUser();
            }, response => {
                this.disabled = false;
                this.$Message.error("获取失败, 返回: " + response);
            })
        },
        choose(index) {
            this.userId = this.sourceData[index].id;
            var userRoleVO = {};
            userRoleVO.userId = this.userId;
            this.$http.post('services/getrolegroup', userRoleVO).then(response => {
                var data = response.data;
                this.baseData = data;
            }, response => {
                this.$Message.error('获取失败, 返回: ' + response);
            })
            this.role = true;
        },
        clean() {
            this.queryUserVO.userName = '';
        },
        onPageIndexChange(pageindex) {
            this.pageNo = pageindex;
            this.queryUser();
        },
        onPageSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.queryUser();
        },
        ok() {
            if (this.userVO.id) {
                this.$http.post("services/userupdate", this.userVO
                ).then(response => {
                    this.disabled = false;
                    this.$Message.success("保存成功");
                    this.queryUser();
                }, response => {
                    this.disabled = false;
                    this.$Message.error("获取失败, 返回: " + response);
                })
            } else {
                this.$http.post("services/useradd", this.userVO
                ).then(response => {
                    this.disabled = false;
                    this.$Message.success("保存成功");
                    this.queryUser();
                }, response => {
                    this.disabled = false;
                    this.$Message.error("获取失败, 返回: " + response);
                })
            }
        },
        cancel() {
            this.disabled = false;
        },
        show(index) {
            this.disabled = true;
            this.userVO.id = this.sourceData[index].id;
            this.userVO.userName = this.sourceData[index].userName;
            this.userVO.userPassword = this.sourceData[index].userPassword;
            this.userVO.userDesc = this.sourceData[index].userDesc;
            this.modal = true;
        },
        addUser() {
            this.userVO.id = "";
            this.userVO.userName = "";
            this.userVO.userPassword = "";
            this.userVO.userDesc = "";
            this.modal = true;
        },
        confirmUserDelete(index) {
            this.$Modal.confirm({
                content: '<p>是否删除数据？</p>',
                onOk: () => {
                    let userList = [];
                    userList.push(this.sourceData[index]);
                    this.$http.post("services/userdelete", userList
                    ).then(response => {
                        this.$Message.success("删除成功");
                        this.queryUser();
                    }, response => {
                        this.$Message.error("获取失败, 返回: " + response);
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        confirmBatchDeleteUser(userList) {
            this.$http.post("services/userdelete", userList
            ).then(response => {
                this.$Message.success("删除成功");
            }, response => {
                this.$Message.error("获取失败, 返回: " + response);
            })
        }
    }
}
</script>